/**
 *  Props 的默认值设置
 *    一、类组件
 *        给 类 添加一个静态的属性，属性名为 defaultProps，属性值为一个对象。在这个对象中来描述prop的默认值
 *        1. 写在组件外部
 *          Hello.defaultProps = {
 *            name: '张三',
 *            age: 18
 *          }
 *        2. 写在组件内部   (推荐)
 *          static defaultProps = {
 *            name: '张三',
 *            age: 18
 *          }
 *    二、函数组件
 *        1. 写在组件外部
 *          World.defaultProps = {
 *             fruits: ['Apple', 'Banana']
 *          }
 *        2. 函数的props参数默认值  （推荐）
 *          function World({ fruits = {} }) {
 *
 *          }
 */

import { Component } from "react";

// 创建一个 类组件
class Hello extends Component {
  // 设置 defaultProps
  static defaultProps = {
    name: "张三",
    age: 18,
  };

  render() {
    let { name, age } = this.props;

    return (
      <div>
        <h2>Hello 组件</h2>
        <p>
          欢迎 {name}，今年 {age} 岁
        </p>
      </div>
    );
  }
}
// 设置Props的默认值
// Hello.defaultProps = {
//   name: "张三",
//   age: 18,
// };

// 创建一个 函数组件
function World({ fruits = ["Apple", "Banana"], className }) {
  // console.log(props, "World");
  console.log("World", this);
  return (
    <div className={className}>
      <h2>World 组件</h2>

      <ul>
        {fruits.map((item, index) => {
          return <li key={index}>{item}</li>;
        })}
      </ul>
    </div>
  );
}
// World.defaultProps = {
//   fruits: ["Apple", "Banana"],
// };

export default function App() {
  return (
    <div>
      <h1>App</h1>

      <Hello />

      <hr />

      <World fruits={["西瓜", "菠萝"]} className="box" />
    </div>
  );
}
